<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>数据报表</title>
    <link rel="stylesheet" href="${rc.contextPath}/statics/forecase/css/init.css"/>
    <script type="text/javascript" src="${rc.contextPath}/statics/forecase/js/jquery-3.4.1.min.js"></script>
    <script type="text/javascript" src="${rc.contextPath}/statics/forecase/js/echarts.min.js"></script>
    <script type="text/javascript" src="${rc.contextPath}/statics/forecase/laydate/laydate.js"></script>
    <style type="text/css">
        body{
            background: #fff;
        }
        .title{
            line-height: 50px;
            margin:0px 20px;
            border-bottom: 1px solid #A9A9A9;
            margin-bottom: 10px;
        }
        .title select{
            width: 180px;
            border-color:#A9A9A9;
        }
        dl>dt{
            height: 38px;
            line-height: 38px;
            font-size: 14px;
        }
        dl>dd{
            height:350px;
        }
        dl,dt,dd{
            width: 100%;
            box-sizing: border-box;
        }
        dl>dt>div>label{
            margin-right: 10px;
        }
        dl>dt>div input{
            vertical-align: middle;
            margin-right: 5px;
        }
        dl>dt>div{
            text-align: center;
        }
        dl>dd .charts{
            height: calc(100% - 38px);
        }
        dl>dd .date{
            height: 38px;
            line-height: 38px;
            font-size: 14px;
            margin-left:60px;
        }
        dl>dd .date input{
            width:150px;
            vertical-align:middle;
            height: 22px;
        }
        dl>dd .date button{
            width:120px;
            vertical-align:middle;
            height: 26px;
        }
        dl dd .left_charts{
            width: 75%;
            position: absolute;
            left: 0px;
            height:100%;
            border-right: 1px solid #F5F5DC
        }
        dl dd .right_parameter{
            width: 25%;
            position:absolute;
            right: 0px;
            height: 100%;
        }
        dl dd .right_parameter div{
            padding-left: 10px;
            padding-top: 10px;
            line-height: 28px;
        }
    </style>
</head>
<body>
<div class="title">
    当前设备：
    <select name="device" style="height:30px;border-radius:5px;" id="chooesDevice">
        <option value="CQA-02-00127">CQA-02-00127</option>
        <option value="CQA-02-00157">CQA-02-00157</option>
    </select>
</div>
<dl>
    <dt>
        <div style="position:relative;" data-event="chooseSensor">
            <b style="position: absolute;left:30px;top:0px;">震动数据表</b>
            <label><input type="checkbox" name="UNBALANCE" value="UNBALANCE">主轴动平衡</label>
            <label><input type="checkbox" name="PEAK1" value="PEAK1">主轴峰值1</label>
            <label><input type="checkbox" name="PEAK2" value="PEAK2">主轴峰值2</label>
            <label><input type="checkbox" name="VEFF" value="VEFF">主轴整体震动</label>
            <label><input type="checkbox" name="AEFF" value="AEFF">主轴加速度</label>
        </div>
    </dt>
    <dd>
        <div class="charts" id="axis">
        </div>
        <div class="date">
            <label>开始时间：<input type="text" name="start1" id="start1" placeholder="yyyy-MM-dd HH:mm:ss"></label>
            &nbsp;&nbsp;
            <label>结束时间：<input type="text" name="end1" id="end1" placeholder="yyyy-MM-dd HH:mm:ss"></label>
            &nbsp;&nbsp;
            <button id="search1">查询</button>
        </div>
    </dd>
</dl>
<dl style="margin-top:30px;margin-bottom: 20px;height:388px">
    <dd style="position: relative;">
        <div class="left_charts">
            <p style="line-height:38px;margin-left: 30px;font-size: 14px"><b>参数数据表</b></p>
            <div class="charts" id="parameter">
            </div>
            <div class="date">
                <label>开始时间：<input type="text" name="start2" id="start2" placeholder="yyyy-MM-dd HH:mm:ss"></label>
                &nbsp;&nbsp;
                <label>结束时间：<input type="text" name="end2" id="end2"  placeholder="yyyy-MM-dd HH:mm:ss"></label>
                &nbsp;&nbsp;
                <button id="search2">查询</button>
            </div>
        </div>
        <div class="right_parameter" style="padding:0px 10px;box-sizing:border-box;">
            <h6>选择：<label style="font-weight:500"><input type="checkbox" id="checkAll">&nbsp;&nbsp;全选</label></h6>
            <div style="height:312px;overflow: auto;">
                <ul class="parameCheck">
                </ul>
            </div>
        </div>
    </dd>
</dl>
</body>
<script type="text/javascript">
    function getOptions(xAxis,datas){
        var	option = {
            tooltip: {
                trigger: 'axis'
            },
            grid: {
                top:'3%',
                left: '3%',
                right: '2%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: xAxis
            },
            yAxis: {
                type: 'value'
            },
            series: datas
        };
        return option;
    }
    function getOptions2(datas,min,max){
        var	option = {
            tooltip: {
                trigger: 'axis'
            },
            grid: {
                top:'3%',
                left: '3%',
                right: '2%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                boundaryGap: false,
                splitLine:{
                    show:false
                },
                axisLabel:{
                    formatter: function (value, index) {
                        return timestampToTime(value);
                    }
                },
                max:max,
                min:min
            },
            yAxis: {
                type: 'value'
            },
            series: datas
        };
        return option;
    }
    var datas = [];
    var x_Parm = [];
    var chartDom = document.getElementById('axis');
    var myChart = echarts.init(chartDom);
    myChart.setOption(getOptions(x_Parm,datas));
    var chartDom2 = document.getElementById('parameter');
    var myChart2 = echarts.init(chartDom2);
    myChart2.setOption(getOptions(x_Parm,datas));
</script>
<script type="text/javascript">
    $("#checkAll").click(function(){
        if($(this).is(":checked")){
            $(".parameCheck").find("input").prop("checked",true);
        }else{
            $(".parameCheck").find("input").prop("checked",false);
        }
    });
    $(".parameCheck").find("input").click(function(){
        if(!$(this).is(":checked")){
            $("#checkAll").prop("checked",false);
        }
    });
    //时间选择器
    laydate.render({
        elem: '#start1'
        ,type: 'datetime'
    });
    laydate.render({
        elem: '#end1'
        ,type: 'datetime'
    });
    laydate.render({
        elem: '#start2'
        ,type: 'datetime'
    });
    laydate.render({
        elem: '#end2'
        ,type: 'datetime'
    });
</script>
<script>
    var deviceId = $("#chooesDevice").val();
    var category = {};
    var showData = {};
    getParam();
    $('#search2').click(getParmData);
    var checkParam = [];
    $("#chooesDevice").change(function(){
        getParam();
        checkParam = [];
        category = {};
        showData = {};
    });
    function getParam(){
        $.get("${rc.contextPath}/SensorReport/getParm",{device:$("#chooesDevice").val()},function(d){
            var html = "";
            if(d.length > 0){
                for (var i = 0;i<d.length;i++){
                    var obj = d[i];
                    if(!obj.PARAM_DESC || obj.PARAM_DESC == null || obj.PARAM_DESC == "null"){
                        continue;
                    }
                    html = html + ' <li><label style="font-weight: 200"><input type="checkbox" value="'+obj.PARAM_NAME+'" name="parm">&nbsp;&nbsp;'+obj.PARAM_DESC+'</label></li>';
                }
             }
            $(".parameCheck").html(html);
        },"json");
    }
    function getParmData(){
        var start = $('#start2').val();
        var end = $('#end2').val();
        var checked_items = $('[name="parm"]:checked');
        checkParam = [];
        category = {};
        for (var i = 0;i<checked_items.length;i++){
            var ob = checked_items.eq(i);
            checkParam.push(ob.val());
            category[ob.val()] = ob.parent().text();
        }
        if(checkParam.length == 0){
            return;
        }
        save_data = {
            start:start,
            end:end,
            deviceId:$("#chooesDevice").val(),
            parm:checkParam
        }
        $.ajax({
            type: "post",
            url:"${rc.contextPath}/SensorReport/getPramDatas",
            data: JSON.stringify(save_data),
            dataType: "json",
            contentType: 'application/json',
            success: function(d){
                showData = {};
                x_Parm = [];
                datas = [];
                for(var i=0 ;i<d.length;i++){
                    var obj = d[i];
                    x_Parm.push(obj.DEALTIME);
                    var keys = Object.keys(obj);
                    for(var n = 0;n < keys.length;n++){
                        if(keys[n] == "DEALTIME"){
                            continue;
                        }
                        if(!category[keys[n]]){
                            continue;
                        }
                        if(!showData[keys[n]]){
                            showData[keys[n]] = getObject(keys[n]);
                        }
                        showData[keys[n]].data.push(obj[keys[n]]);
                    }
                }
                var keys = Object.keys(showData);
                for(var i = 0;i<keys.length;i++){
                    datas.push(showData[keys[i]]);
                }
                myChart2.setOption(getOptions(x_Parm,datas),true);
            }
        });
    }
    function getObject(name){
        var obj = {
                name: category[name],
                type: 'line',
                stack: category[name],
                showSymbol: false,
                data: []
            }
            return obj;
    }
    function getObject2(name){
        var obj = {
            name: name,
            type: 'line',
            stack: name,
            showSymbol: false,
            data: []
        }
        return obj;
    }
</script>
<script>
    var Sensor_items = [];
    $("#search1").click(function(){
        Sensor_items = [];
        var start=Date.parse(new Date($('#start1').val()));
        var end=Date.parse(new Date($('#end1').val()));
        var choose_sensor = $('[data-event="chooseSensor"]').find("input:checked");
        var min;
        var max;
        for(var i = 0;i<choose_sensor.length;i++){
            var o = choose_sensor.eq(i);
            Sensor_items.push(o.val());
        }
        save_data = {
            start:start,
            end:end,
            deviceId:$("#chooesDevice").val(),
            items:Sensor_items
        }
        $.ajax({
            type: "post",
            url:"${rc.contextPath}/SensorReport/getPramDatas2",
            data: JSON.stringify(save_data),
            dataType: "json",
            contentType: 'application/json',
            success: function(d){
                var t_items = {};
                var show_items =[];
                var keys = Object.keys(d);
                for(var n = 0;n < keys.length; n++){
                    var key = keys[n];
                    var ob = d[key];
                    for(var i=0;i<ob.length;i++){
                        var obj = ob[i];
                        if(i == 0){
                            if(min){
                                min = obj.DATETIME >= min ? min : obj.DATETIME;
                            }else{
                                min = obj.DATETIME;
                            }
                        }
                        if(max){
                            max = obj.DATETIME > max ?  obj.DATETIME : max;
                        }else{
                            max = obj.DATETIME;
                        }
                        if(!t_items[key]){
                            t_items[key] = getObject2(key);
                        }
                        t_items[key].data.push([obj.DATETIME,obj.VALUE]);
                    }
                }
                var kk  = Object.keys(t_items);
                for(var i=0;i<kk.length;i++){
                   show_items.push(t_items[kk[i]]);
                }
                console.log(show_items);
                myChart.setOption(getOptions2(show_items,min,max),true);
            }
        });
    });
    function timestampToTime(timestamp) {
        var date = new Date(timestamp);
        var Y = date.getFullYear() + '-';
        var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
        var D = date.getDate() < 10 ?  '0'+date.getDate()+ ' ' : date.getDate()+ ' ';
        var h = date.getHours() < 10 ? '0'+date.getHours()+ ':' : date.getHours()+ ':';
        var m = date.getMinutes() < 10 ? '0'+date.getMinutes()+ ':' : date.getMinutes()+ ':';
        var s = date.getSeconds()< 10 ? '0'+date.getSeconds() : date.getSeconds();
        return Y+M+D+"\n"+h+m+s;
    }
</script>
</html>